<template>
  <div class="histogramGroupChat">
    <div class="histogramGroupChat_title">收付款统计
      <span>单位(元)</span>
    </div>

    <div class="histogramGroupChat_chat">
      <!-- eslint-disable-next-line -->
      <div id="histogramGroup"></div>
    </div>
  </div>
</template>

<script>
import { getTotalMoneyByMonth } from '@/api/chart.js'
export default {
  data() {
    return {
      chartData: null
    }
  },
  created() {
    this.getData()
    console.log('收付款统计')
  },
  mounted() {
    // this.inithistogramGroupChat()
  },
  methods: {
    // 获取数据
    async getData() {
      const res = await getTotalMoneyByMonth()
      console.log('收付款统计', res.data)
      if (res.code === 200) {
        this.chartData = res.data
        this.inithistogramGroupChat()
      }
    },

    // 初始化柱状图
    inithistogramGroupChat() {
      const chartContainer = document.getElementById('histogramGroup')
      const chart = this.$echarts.init(chartContainer)

      const options = {
        tooltip: {},
        dataset: {
          dimensions: this.chartData.nameList,
          source: this.chartData.dataList
        },
        xAxis: { type: 'category' },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#E8E8E8'
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar', color: '#1890ff' }, { type: 'bar', color: '#37E2E2' }, { type: 'bar', color: '#FF7D00' }, { type: 'bar', color: '#7A38CA' }],
        grid: {
          left: '30px',
          right: '30px',
          bottom: '30px',
          containLabel: true
        }
      }

      chart.setOption(options)
    }
  }
}
</script>

<style lang="scss" scoped>
.histogramGroupChat {
  background-color: #ffffff;
  border-radius: 6px;
  flex: 1;
  margin-right: 20px;
  margin-bottom: 20px;

  &_title {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    color: #101010;
    padding: 30px;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;

    span {
      font-size: 14px;
      color: #8492A6;
    }
  }

  &_chat {
    padding: 0 10px;

    #histogramGroup {
      min-width: 800px;
      width: 100%;
      height: 450px;
    }
  }
}
</style>
